<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    #main{
        border: 1px blue solid;
        width: 304px;
        height: 240px;
    }
    #main > ul > li{
        margin: 0;
        list-style: none;
        float: left;
        border: 1px black solid;
        padding: 5px;
        cursor: pointer;
        /*font-size: 14px;*/
    }
    .style{
        padding: 5px;
        clear: both;
        /*隐藏*/
        display: none;
        font-size: 12px;

    }
    #container1{
        display: block;
    }
    #main div a{
        text-decoration: none;
    }
    #main > ul > #li1{
        background-color: gray;
        border-bottom: none;
    }
</style>

<body>
    <div id="main">
        <ul>
            <li id="li1" onclick="showContainer(this)">国际新闻</li>
            <li id="li2" onclick="showContainer(this)">国内新闻</li>
            <li id="li3" onclick="showContainer(this)">体育新闻</li>
            <li id="li4" onclick="showContainer(this)">娱乐新闻</li>
        </ul>
        <div id="container1" class="style">
            <a href="#">1 河南再次发生矿难，死伤人数超过100</a> <br>
            <a href="#">2 禽流感在全国多处继续蔓延，温家宝指示加强防控</a> <br>
        </div>
        <div id="container2" class="style">
            <a href="#">3 南方大旱，农作物减产绝收面积上千万亩</a> <br>
            <a href="#">4 猪流感在广东群体性暴发</a> <br>
        </div>
        <div id="container3" class="style">
            <a href="#">5 禽流感在全国多处继续蔓延，温家宝指示加强防控</a> <br>
            <a href="#">6 南方大旱，农作物减产绝收面积上千万亩</a> <br>
        </div>
        <div id="container4" class="style">
            <a href="#">7 难哦</a> <br>
        </div>
    </div>
</body>

<script>
    function showContainer(obj) {
        let value = obj.getAttribute('id').match(/\d+(\.\d)?/g);
        document.getElementById('container' + value).style.display = 'block';
        obj.style.backgroundColor = 'gray';
        obj.style.borderBottom = 'none';
        obj.style.cursor = 'pointer';

        for (let j = 1;j <= 4;j ++){
            if (j != value){
                document.getElementById('container' + j).style.display = 'none';
                document.getElementById('li' + j).style.backgroundColor='white';
                document.getElementById('li' + j).style.borderBottom='1px black solid';
            }
        }
    }
</script>

</html>